<html>
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
    <meta name="viewport" content="initial-scale=1.0">
    <title>{{ subject }}</title>

    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }
        a {
            color: #0098cf;
            text-decoration: underline;
        }
        a span {
            color: #0098cf;
        }
        a img {
            border: 0 none;
        }
        h1 {
            margin: 0 0 18px;
            padding: 0;
            font-family: 'Helvetica Neue', arial, sans-serif;
            font-weight: bold;
            font-size: 20px;
            line-height: 30px;
            -webkit-text-size-adjust: none;
        }
        h2 {
            margin: 20px 0 4px 0;
            padding: 0;
            font-family: 'Helvetica Neue', arial, sans-serif;
            font-weight: bold;
            font-size: 15px;
            line-height: 20px;
            -webkit-text-size-adjust: none;
        }
        h2 > span {
            font-weight: normal;
        }
        p {
            margin: 0 0 15px;
            font-family: 'Helvetica Neue', arial, sans-serif;
            font-size: 15px;
            line-height: 22px;
            -webkit-text-size-adjust: none;
        }
        ul {
            margin: 0 0 15px;
            padding: 0 0 0 20px;
            list-style: disc outside;
            font-family: 'Helvetica Neue', arial, sans-serif;
            font-size: 15px;
            line-height: 22px;
        }
        ul li {
            font-family: 'Helvetica Neue', arial, sans-serif;
            font-size: 15px;
            line-height: 22px;
            -webkit-text-size-adjust: none;
        }
        {% block headerCSS %}
        .logo {
            padding-top: 24px;
            padding-right: 24px;
            padding-bottom: 24px;
            padding-left: 24px;
            background-color: #0098cf;
            color: #ffffff;
            font-family: 'Helvetica Neue', arial, sans-serif;
            font-size: 24px;
            line-height: 36px;
            font-weight: bold;
            -webkit-text-size-adjust: none;
            text-align: left;
        }
        .logoImage {
            display: block;
            border: 0 none;
            background-color: #0098cf;
            color: #ffffff;
        }
        {% endblock headerCSS %}
        .background {
            background-color: #faf9f4;
        }
        .container {
            background-color: #ffffff;
            text-align: left;
        }

        .footerCTAButton {
            margin-bottom: 0;
            width: auto;
            display: inline-block;
            margin-right: .5em;
            outline: 0 none;
            border-radius: .25em;
            border: 1px solid #00ac3b;
            padding: 0 1.5em;
            cursor: pointer;
            font-family: 'Helvetica Neue', arial, sans-serif;
            font-weight: bold;
            min-height: 2.8125em;
            text-align: center;
            text-decoration: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            color: #ffffff;
            background: #00ac3b;
            filter: none;
            font-size: 1em;
            box-shadow: 0 0.0625em 0.0625em rgba(44, 44, 44, 0.4);
        }

        .containerPadding {
            border: 1px solid #e6e6e6;
            border-top: 0 none;
            padding: 24px;
            color: #2c2c2c;
            background-color: #ffffff;
            font-family: 'Helvetica Neue', arial, sans-serif;
            font-size: 15px;
            line-height: 22px;
            -webkit-text-size-adjust: none;
            text-align: left;
        }
        .footnote, .signoff {
            padding: 24px;
            color: #5c5c5c;
            background-color: #faf9f4;
            font-family: 'Helvetica Neue', arial, sans-serif;
            font-size: 14px;
            line-height: 20px;
            -webkit-text-size-adjust: none;
            text-align: left;
        }
        .footnote {
            border-bottom: 1px solid #e2e2de;
        }
        @media only screen and (max-device-width: 600px) {
            table[class=container] {
                width: 100% !important;
            }

            table[class=container] > tr > td {
                width: 100% !important;
            }

            td[class=footnote], td[class=signoff] {
                padding-right: 24px;
                padding-left: 24px;
            }
            h1 {
                font-size: 16px;
                line-height: 24px;
            }
        }
    </style>
</head>
<body class="background" bgcolor="#faf9f4" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="background-color: #faf9f4; margin: 0; padding: 0;">
<br>
<table border="0" width="100%" height="100%" cellpadding="0" cellspacing="0" class="background" bgcolor="#faf9f4" style="background-color: #faf9f4;">
    <tr>
        <td align="center">
            <table class="contenttable" cellspacing="0" cellpadding="0" width="100%" style="text-align: left; max-width:600px;">
                {% block header %}
                    <tr>
                        <td align="left" width="600" class="logo" bgcolor="#faf9f4" style="color: #0098CF; font-family: 'Helvetica Neue', arial, sans-serif; font-size: 24px; line-height: 36px; font-weight: bold; -webkit-text-size-adjust: none; background-color: #faf9f4; padding-top: 12px; padding-right: 24px; padding-bottom: 12px; padding-left: 24px;">
                            <img alt="{{ 'default.siteName'|trans }}" src="{{ asset('favicon.ico') }}" width="100" height="100" class="logoImage" border="0" align="top" style="display: block; background-color: #faf9f4; color: #0098CF; border: 0 none;">
                        </td>
                    </tr>
                {% endblock header %}

                {% if block('outerContent') is defined and block('outerContent') is not empty  %}
                <tr>
                    <td>
                        {{ block('outerContent')|raw }}
                    </td>
                </tr>
                {% endif %}

                <br/>
                {% if block('content') is defined and block('content') is not empty  %}
                <tr>
                    <td align="left" width="600" class="containerPadding" bgcolor="#ffffff" style="color: #2c2c2c; font-family: 'Helvetica Neue', arial, sans-serif; font-size: 15px; line-height: 22px; -webkit-text-size-adjust: none; background-color: #ffffff; padding: 24px; border-color: #e6e6e6; border-style: none solid solid; border-width: 0 1px 1px; border-radius: .3em; ">
                        {% include '@SharedKernel/salutation.html.twig' %}
                        {{ block('content')|raw }}
                        {% include '@SharedKernel/signature.html.twig' %}
                    </td>
                </tr>
                {% endif %}
                <br/>

                {% block footer %}
                    {% if block('footerContent') is defined and block('footerContent') is not empty  %}
                        <tr>
                            <td align="left" class="footnote" bgcolor="#faf9f4" style="border-bottom-style: solid; border-bottom-color: #e2e2de; border-bottom-width: 1px; color: #6b6b6b; font-family: 'Helvetica Neue', arial, sans-serif; font-size: 14px; line-height: 20px; -webkit-text-size-adjust: none; background-color: #faf9f4; padding: 30px 5px 15px;">
                                {{ block('footerContent')|raw }}
                            </td>
                        </tr>
                    {% endif %}
                {% endblock footer %}
                {% block signOff %}
                    <tr>
                        <td align="center" width="600" class="" bgcolor="#faf9f4" style="font-family: 'Helvetica Neue', arial, sans-serif; font-size: 14px; line-height: 20px; -webkit-text-size-adjust: none; background-color: #faf9f4; padding: 15px 5px;">
                            <span style="text-align: left; color: #6b6b6b;">{{ 'default.siteName'|trans }}&nbsp;&copy;</span><br/>
                            <a style="color: #6b6b6b;" href="http://www.url-for-contact.com">{{ 'default.email.footer.contact_us'|trans }}</a>
                            &nbsp;&nbsp;|&nbsp;&nbsp;<a style="color: #6b6b6b;" href="http://www.url-with-terms-and-conditions.com">{{ 'default.email.footer.terms_and_conditions'|trans }}</a>
                            {% if unSubscribeToMail is defined and unSubscribeRoute is defined %}
                                &nbsp;&nbsp;|&nbsp;&nbsp;<a style="color: #6b6b6b;" href="http://www.url-for-unsubscribing.com">{{ 'default.email.unsubscribe'|trans }}</a>
                            {% endif %}
                        </td>
                    </tr>
                {% endblock signOff %}
            </table>
         </td>
        <td>&nbsp;</td>
    </tr>
</table>
</body>
</html>
